<template>
	<view class="page case_details">
		<view class="card patient_item">
			<view class="patient_item_info">
				<view class="item_avatar">
					<image :src="item.avatar" mode="scaleToFill"></image>
				</view>
				<view class="item_info">
					<view class="info_name">
						<view class="name">
							{{item.name || ''}}
						</view>
						<view class="tips blue">
							已实名
						</view>
					</view>
					<view class="info_other">
						<view>
							{{item.sex==1?"男":"女" || '男'}}
						</view>
						<view>
							{{$IdCard(item&&item.idCard,3) || 0}}岁
						</view>
						<view>
							{{item.idCard || 0}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card case_item">
			<view class="item_info">
				<view class="info_title">
					主诉
				</view>
				<view class="info_content">
					内容
				</view>
			</view>
			<view class="item_info">
				<view class="info_title">
					现病史
				</view>
				<view class="info_content">
					内容
				</view>
			</view>
			<view class="item_info">
				<view class="info_title">
					既往史
				</view>
				<view class="info_content">
					内容
				</view>
			</view>
			<view class="item_info">
				<view class="info_title">
					诊断
				</view>
				<view class="info_content">
					内容
				</view>
			</view>
			<view class="item_info">
				<view class="info_title">
					用法
				</view>
				<view class="info_content">
					内容
				</view>
			</view>
		</view>
		<view class="card case_item">
			<view class="item_info">
				<view class="info_title">
					医嘱
				</view>
				<view class="info_content">
					内容
				</view>
			</view>
			<view class="item_info flex">
				<view class="info_title">
					整理时间：
				</view>
				<view class="info_text">
					2024-05-22 12:00
				</view>
			</view>
			<view class="item_info flex">
				<view class="info_title">
					整理人：
				</view>
				<view class="info_text">
					胡阳阳 淄博市中心医院 | 神经外科
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.case_details {
		.patient_item {
			position: relative;
			padding: 40rpx 20px;
			background-color: #FFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.patient_item_info {
				display: flex;
				align-items: center;

				.item_avatar {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item_info {
					margin-left: 20rpx;
					font-size: 22rpx;
					color: #999999;

					.info_name,
					.info_other {
						display: flex;
						align-items: center;

						&>view {
							margin-right: 10rpx;

							&:last-child {
								margin: 0;
							}
						}
					}

					.info_name {
						margin-bottom: 20rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.tips {
							padding: 6rpx 10rpx;
							border-radius: 10rpx;
							font-size: 22rpx;
							margin-left: 20rpx;

							&.blue {
								color: #3B6CFE;
								background-color: #F3F8FF;
							}
						}
					}
				}
			}
		}

		.case_item {
			margin-bottom: 30rpx;

			&:last-child {
				margin: 0;
			}

			.item_info {
				margin-bottom: 30rpx;

				&:last-child {
					margin: 0;
				}

				&.flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}


				.info_title {
					font-size: 28rpx;
					color: #999999;
					margin-bottom: 30rpx;
				}

				.info_text {
					font-size: 28rpx;
					color: #333333;
				}

				.info_content {
					padding: 20rpx;
					background-color: #F8FAFB;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
</style>